<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>属性</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        html,
        body,
        #Attribute {
            background-color: rgba(0, 0, 0, 0);
            height: 100%;
            overflow: hidden;
            color: #fff;
        }

        .layui-form-item {
            border: 1px #fff solid;
            margin-bottom: 0px !important;
            border-bottom: none;
        }

        .layui-input {
            background-color: #fff !important;
            height: 30px;
            margin-top: 5px
        }

        .active {
            border: 1px solid #fc0 !important;
            box-shadow: 0 0 8px #ddd;
            -moz-box-shadow: 0 0 8px #ddd;
            -webkit-box-shadow: 0 0 8px #ddd;
            cursor: pointer;
        }


        .layui-form-label {
            width: 100px !important;
            padding: 11px 15px !important;
            border-right: 1px #fff solid;
            font-weight: bold !important;
            font-size: 14px;
            text-align: center;
        }

        .layui-input-block {
            width: 150px !important;
            margin-left: 150px !important;
        }

        .mCSB_container {
            margin-right: 17px !important;
        }

        legend {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            margin-top: 20px;
        }

        .removeGraphic {
            position: absolute;
            top: -9px;
            right: 0;
        }

        .attrTitle {
            position: relative;
        }

        .outline {
            display: none;
        }
    </style>
</head>

<body>
    <div id="Attribute" style="margin:0 10px;">
        <div class="attrTitle">
            <legend>样式信息</legend>
            <!-- <button type="button" class="layui-btn layui-btn-danger removeGraphic" onclick="removeGraphic()">移除</button> -->
        </div>
        <!--贴地线-->
        <div class="props GroundPolyline" style="display: none">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" style="line-height: 38px;">
                        贴地线
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="0" value="贴地线"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">线宽</label>
                    <div class="layui-input-block">
                        <input type="text" name="width" lay-verify="title" autocomplete="off" placeholder="0"
                            onkeyup="value=value.replace(/[^\d\.]/g,'')" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">填充色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-GroundPolyline" style="display: inline-block;margin-top: 2px;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position:relative;border: 1px #fff solid;">
                    <label class="layui-form-label">填充透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px">
                        <div id="opacity-GroundPolyline" class="demo-slider"></div>
                    </div>
                </div>
            </form>
        </div>
        <!--贴地面-->
        <div class="props GroundPolygon" style="display: none">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" style="line-height: 38px;">
                        贴地面
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="0" value="贴地面"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">填充色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-GroundPolygon" style="display: inline-block;margin-top: 2px;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position:relative;border: 1px #fff solid;">
                    <label class="layui-form-label">填充透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px">
                        <div id="opacity-GroundPolygon" class="demo-slider"></div>
                    </div>
                </div>
            </form>
        </div>
        <!--拉伸面-->
        <div class="props ExtrudedPolygon" style="display: none">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block" style="line-height: 38px;">
                        拉伸面
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="0" value="拉伸面"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="height: 40px;">
                    <label class="layui-form-label">填充色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-ExtrudedPolygon" style="display: inline-block;margin-top: 2px;"></div>
                    </div>
                </div>
                <div class="layui-form-item" style="position:relative">
                    <label class="layui-form-label">填充透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px">
                        <div id="opacity-ExtrudedPolygon" class="demo-slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">拉伸高度</label>
                    <div class="layui-input-block">
                        <input type="text" name="height" lay-verify="title" autocomplete="off" placeholder="0"
                            onkeyup="value=value.replace(/[^\d\.]/g,'')" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="border: 1px #fff solid;">
                    <label class="layui-form-label">是否显示边框</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" id="showExtrudedPolygonOutline"
                            lay-filter="showExtrudedPolygonOutline" title="开关">
                    </div>
                </div>
                <div class="layui-form-item outline" style="height: 40px;border-top: none;">
                    <label class="layui-form-label">边框色</label>
                    <div class="layui-input-block">
                        <div id="colorchk-ExtrudedPolygon2" style="display: inline-block;margin-top: 2px;"></div>
                    </div>
                </div>
                <div class="layui-form-item outline" style="position:relative;border: 1px #fff solid;">
                    <label class="layui-form-label">边框透明度</label>
                    <div class="layui-input-block" style="position: absolute;top: 16px">
                        <div id="opacity-ExtrudedPolygon2" class="demo-slider"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="../layui/layui.js"></script>
    <script>
        var Viewer = parent.sgworld._Viewer;
        var Cesium = parent.Cesium;
        var PopupData = parent.SmartEarthPopupData;
        var type = PopupData.propType;
        var editGraphic = PopupData.editGraphic;
        !editGraphic && (editGraphic = {});
        if (editGraphic.graphic && editGraphic.graphic.material && editGraphic.graphic.material.color && editGraphic.graphic.material.color._value) {
            getFillColor(editGraphic.graphic.material.color._value);
        } else {
            editGraphic.fillColor = '#ff0000';
            editGraphic.alpha = 50;
        }
        if (editGraphic.graphic && editGraphic.graphic.outlineColor && editGraphic.graphic.outlineColor._value) {
            getOutlineColor(editGraphic.graphic.outlineColor._value);
        } else {
            editGraphic.outlineColor = '#ff0000';
            editGraphic.outlineAlpha = 100;
        }
        layui.use(['element', 'form', 'slider', 'colorpicker'], function () {
            window.$ = layui.jquery;
            window.element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            window.form = layui.form;
            window.slider = layui.slider;
            window.colorpicker = layui.colorpicker;

            $('#Attribute').find("." + type).show();

            switch (type) {
                case 'ExtrudedPolygon':
                    ExtrudedPolygonProp();
                    $('.ExtrudedPolygon input[name="name"]').val(editGraphic.entity.name);
                    $('.ExtrudedPolygon input[name="height"]').val(editGraphic.graphic.extrudedHeight.getValue() - editGraphic.graphic.height.getValue());
                    break;
                case 'GroundPolygon':
                    GroundPolygonProp();
                    $('.GroundPolygon input[name="name"]').val(editGraphic.entity.name);
                    break;
                case 'GroundPolyline':
                    GroundPolylineProp();
                    $('.GroundPolyline input[name="name"]').val(editGraphic.entity.name);
                    $('.GroundPolyline input[name="width"]').val(editGraphic.graphic.width.getValue());
                    break;
            }

            $('.props input[name="name"]').on('input propertychange', function (event) {
                var value = $(this).val();
                if (editGraphic.entity) {
                    editGraphic.entity.name = value;
                }
            });
        });

        //拉伸面属性
        function ExtrudedPolygonProp() {
            $('.props input[name="height"]').on('input propertychange', function (event) {
                var value = $(this).val().replace(/[^\d\.]/g, '');
                if (value === '' || value === '.') return;
                if (editGraphic.graphic && editGraphic.graphic.extrudedHeight) {
                    editGraphic.graphic.extrudedHeight = parseFloat(value) + editGraphic.graphic.height.getValue();
                }
                if (editGraphic.heightpoints) {
                    editGraphic.heightpoints.forEach(item => {
                        var entypos = item.position._value;
                        var entycartographic = Cesium.Cartographic.fromCartesian(entypos);
                        var lng3 = Cesium.Math.toDegrees(entycartographic.longitude)
                        var lat3 = Cesium.Math.toDegrees(entycartographic.latitude)
                        var pos = Cesium.Cartesian3.fromDegrees(lng3, lat3, parseFloat(value) + editGraphic.graphic.height.getValue());
                        item.position = pos;
                    })
                }
            });

            slider.render({
                elem: '#opacity-ExtrudedPolygon'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: editGraphic.alpha
                , change: function (value) {
                    editGraphic.graphic.material._color._value.alpha = value / 100;
                }
            });

            slider.render({
                elem: '#opacity-ExtrudedPolygon2'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: editGraphic.outlineAlpha
                , change: function (value) {
                    editGraphic.outlineAlpha = value;
                    editGraphic.graphic.outlineColor._value.alpha = value / 100;
                }
            });

            colorpicker.render({
                elem: '#colorchk-ExtrudedPolygon'
                , color: (editGraphic && editGraphic.fillColor) || '#ff0000' //设置默认色
                , done: function (color) {
                    editGraphic.fillColor = color;
                    editGraphic.graphic.material.color.setValue(new Cesium.Color.fromCssColorString(editGraphic.fillColor).withAlpha(editGraphic.alpha / 100));
                }
            });
            colorpicker.render({
                elem: '#colorchk-ExtrudedPolygon2'
                , color: (editGraphic && editGraphic.outlineColor) || '#ff0000' //设置默认色
                , done: function (color) {
                    editGraphic.outlineColor = color;
                    if (editGraphic.graphic && editGraphic.graphic.material && editGraphic.graphic.outlineColor) {
                        editGraphic.graphic.outlineColor = new Cesium.Color.fromCssColorString(editGraphic.outlineColor).withAlpha(editGraphic.alpha / 100);
                    }
                }
            });

            form.on('switch(showExtrudedPolygonOutline)', function (data) {
                var isShow = this.checked;
                editGraphic.graphic && (editGraphic.graphic.outline = isShow);
                if (isShow) {
                    $('.outline').show();
                } else {
                    $('.outline').hide();
                }
            });
            if (editGraphic.graphic && editGraphic.graphic.outline) {
                $('#showExtrudedPolygonOutline').next().click();
                $('#showExtrudedPolygonOutline').attr('value', 'on')
            }
        }

        //贴地面属性
        function GroundPolygonProp() {
            slider.render({
                elem: '#opacity-GroundPolygon'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: editGraphic.alpha
                , change: function (value) {
                    editGraphic.graphic.material._color._value.alpha = value / 100;
                }
            });

            colorpicker.render({
                elem: '#colorchk-GroundPolygon'
                , color: (editGraphic && editGraphic.fillColor) || '#ff0000' //设置默认色
                , done: function (color) {
                    editGraphic.fillColor = color;
                    editGraphic.graphic.material.color.setValue(new Cesium.Color.fromCssColorString(editGraphic.fillColor).withAlpha(editGraphic.alpha / 100));
                }
            });
        }

        //贴地线属性
        function GroundPolylineProp() {
            $('.props input[name="width"]').on('input propertychange', function (event) {
                var value = $(this).val().replace(/[^\d\.]/g, '');
                if (value === '' || value === '.') return;
                if (editGraphic.graphic && editGraphic.graphic.width) {
                    editGraphic.graphic.width = parseFloat(value);
                }
            });

            slider.render({
                elem: '#opacity-GroundPolyline'
                , min: 0 //最小值
                , max: 100 //最大值
                , value: editGraphic.alpha
                , change: function (value) {
                    editGraphic.graphic.material._color._value.alpha = value / 100;
                }
            });

            colorpicker.render({
                elem: '#colorchk-GroundPolyline'
                , color: (editGraphic && editGraphic.fillColor) || '#ff0000' //设置默认色
                , done: function (color) {
                    editGraphic.fillColor = color;
                    editGraphic.graphic.material.color.setValue(new Cesium.Color.fromCssColorString(editGraphic.fillColor).withAlpha(editGraphic.alpha / 100));
                }
            });
        }

        function removeGraphic() {
            if (editGraphic.entity) {
                Viewer.entities.remove(editGraphic.entity);
            }
        }

        function getFillColor(rgba) {
            editGraphic.fillColor = colorHex('rgb(' + rgba.red * 255 + ',' + rgba.green * 255 + ',' + rgba.blue * 255 + ')');
            editGraphic.alpha = rgba.alpha * 100;
        }

        function getOutlineColor(rgba) {
            editGraphic.outlineColor = colorHex('rgb(' + rgba.red * 255 + ',' + rgba.green * 255 + ',' + rgba.blue * 255 + ')');
            editGraphic.outlineAlpha = rgba.alpha * 100;
        }

        function colorHex(rgb) {
            var _this = rgb;
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            if (/^(rgb|RGB)/.test(_this)) {
                var str = _this.replace(/(rgb|RGB)*/g, "");
                str = str.replace("(", "").replace(")", "");
                var aColor = str.split(",");
                var strHex = "#";
                for (var i = 0; i < aColor.length; i++) {
                    var hex = Number(aColor[i]).toString(16);
                    hex = hex.length === 1 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
                    if (hex === "0") {
                        hex += hex;
                    }
                    strHex += hex;
                }
                if (strHex.length !== 7) {
                    strHex = _this;
                }
                return strHex;
            } else if (reg.test(_this)) {
                var aNum = _this.replace(/#/, "").split("");
                if (aNum.length === 6) {
                    return _this;
                } else if (aNum.length === 3) {
                    var numHex = "#";
                    for (var i = 0; i < aNum.length; i += 1) {
                        numHex += (aNum[i] + aNum[i]);
                    }
                    return numHex;
                }
            } else {
                return _this;
            }
        }
    </script>


</body>

</html>